.container {
  background-color: #eee;
  width: 1000px;
  margin: 30px auto;
  display: grid;
  //   grid-template-rows: 150px 150px;
  grid-template-rows: repeat(2, 150px);
  //   grid-template-columns: 150px 150px 150px;
  //   grid-template-columns: repeat(3, 150px);
  //   grid-template-columns: repeat(2, 150px) 1fr;
  //   grid-template-columns: 50% 1fr 2fr;
  grid-template-columns: repeat(3, 1fr);
  //   row-gap: 30px;
  //   column-gap: 30px;
  gap: 30px;
}

.item {
  padding: 20px;
  font-size: 30px;
  font-family: sans-serif;
  color: white;

  &--1 {
    background-color: orangered;
    /*
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 2;
    grid-column-end: 3;
    */
    grid-row: 2/3;
    grid-column: 2/3;
    z-index: 10;
  }
  &--2 {
    background-color: yellowgreen;
    // grid-column: 2 / span 2; // span 2: 合并2列
    grid-column: 2 / -1; // -1: 到最大列数
  }
  &--3 {
    background-color: blueviolet;
    grid-column: 1/3;
    grid-row: 2/3;
  }
  &--4 {
    background-color: palevioletred;
  }
  &--5 {
    background-color: royalblue;
    // grid-row: 1/3;
    grid-row: 1 / span 2;
    grid-column: 3/4;
  }
  &--6 {
    background-color: goldenrod;
    grid-row: 1/2;
    grid-column: 2/3;
  }
}
